<template>
  <div class="assets_manage_wrap">
    <!-- 查询表单 -->
    <a-card class="query_card">
      <a-form layout="inline" :model="queryFormData" @finish="queryFormQuery">
        <a-form-item label="产品名称">
          <a-input
            v-model:value="queryFormData.assetsName"
            placeholder="请输入产品名称"
            allowClear
          >
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)">
            查询
          </a-button>
          <a-button
            type="primary"
            :icon="h(ReloadOutlined)"
            style="margin-left: 14px"
            danger
            @click="resetQueryFormData"
          >
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 数据表格 -->
    <a-card class="table_card">
      <a-table
        :columns="tableColumns"
        :data-source="tableData"
        :loading="tableLoading"
        class="custom_table"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              Name
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>

          <template v-else-if="column.key === 'action'">
            <div class="table_action_box">
              <!-- :icon="h(InfoCircleOutlined)" -->
              <a-button type="link" @click="detailClick" class="detail_btn">
                详情
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
import './index.scss';
import { defineComponent, onMounted, h, ref, reactive } from 'vue';
export default defineComponent({
  name: 'AssetsManage',
});
</script>
<script lang="ts" setup>
import {
  SearchOutlined,
  ReloadOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons-vue';
import type { QueryFormType } from '#/api/assetsManage';
import { getTableNum } from '#/utils';
import { useRouter } from 'vue-router';

const router = useRouter();

// 详情点击事件
const detailClick = () => {
  router.push({
    path: '/assetsDetail',
  });
};

// 表格字段规则
const tableColumns = ref([
  {
    title: '序号',
    dataIndex: 'num',
    key: 'num',
    width: 80,
    align: 'center',
  },
  {
    title: '产品名称',
    dataIndex: 'assetsName',
    key: 'assetsName',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 120,
    align: 'center',
  },
]);

// 表格加载标识
const tableLoading = ref(false);

// 表格数据
const tableData = ref([
  {
    num: 1,
    assetsName: '放大镜',
  },
  {
    num: 2,
    assetsName: 'PLC',
  },
  {
    num: 3,
    assetsName: 'USR-G776',
  },
  {
    num: 4,
    assetsName: '网关DTU',
  },
  {
    num: 5,
    assetsName: '口红DTU',
  },
  {
    num: 6,
    assetsName: '放大镜',
  },
  {
    num: 7,
    assetsName: 'PLC',
  },
  {
    num: 8,
    assetsName: 'USR-G776',
  },
  {
    num: 9,
    assetsName: '网关DTU',
  },
  {
    num: 10,
    assetsName: '口红DTU',
  },
]);

// 查询表单数据
const queryFormData = ref<QueryFormType>({
  page: 1,
  size: 10,
  assetsName: '',
});

// 重置表单数据
const resetQueryFormData = () => {
  queryFormData.value = {
    page: 1,
    size: 10,
    assetsName: '',
  };
  selectTableData();
};

// 查询表单查询事件
const queryFormQuery = (values: any) => {
  console.log(values, queryFormData.value);
  selectTableData();
};

// 查询表格数据
const selectTableData = () => {
  // tableLoading.value = true;
};

// init
onMounted(() => {
  selectTableData();
});
</script>

<style lang="scss" scoped></style>
